<template>
	<div class="my-order">
		<!-- #ifndef MP-WEIXIN-->
		<custom-header-bar bg="1" title="预约订单" backStatus="1">
			<div class="top-btn" @click="handleClickMembers" v-if="userInfo.utype == 1 && userList.length > 0">
				家属订单
			</div>
		</custom-header-bar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN-->
		<custom-header-bar bg="1" height="220" title="预约订单" backStatus="1">
			<div class="top-btn" @click="handleClickMembers" v-if="userInfo.utype == 1 && userList.length > 0">
				家属订单
			</div>
		</custom-header-bar>
		<!-- #endif -->
		<div class="tabs flex align-center">
			<div class="item" :class="{ active: tabType === item.type }" v-for="item in tabList" :key="item.name"
				@click="handleClickTab(item)">
				{{ item.name }}
			</div>
		</div>
		<div class="list">
			<div class="item" @click="handleClickItem(item)" v-for="item in list" :key="item.id">
				<div class="time flex align-center justify-between">
					<span style="color: #484848; font-size: 32upx">预约时间</span>
					<span style="color: #dc3338; font-size: 30upx">{{item.subDate}}
						{{item.subTime.split(',')[0]}}</span>
				</div>
				<div class="flex item-center">
					<img :src="PictureUrl + 'image-kf.png'" class="avatar" alt="" />
					<div class="info">
						<div>
							<span class="name">{{ item.laborerName }}</span>
							<span class="experience">{{ item.jzLaborer && item.jzLaborer.yearNum }}年工作经验</span>
						</div>
						<div class="address">
							{{ item.subAddressStr }}
						</div>
					</div>
					<image src="/static/icon-next-gray.png" class="more-icon"></image>
					<!-- <img src="/static/icon-next-gray.png" class="more-icon" alt="" /> -->
				</div>
				<div class="list-bottom">
					<img v-if="item.orderSuccessType === 1" :src="PictureUrl + 'order-success.png'" alt="" />
					<img v-if="item.orderSuccessType === 2" :src="PictureUrl + 'order-fail.png'" alt="" />
					<button v-if="item.orderSuccessType === 3" class="list-btn" @click.stop="handleClickRevoke(item)">
						撤销
					</button>
				</div>
			</div>
		</div>
		<div class="list-empty" v-if="list.length === 0">
			<div>暂无订单</div>
			<img :src="PictureUrl + 'order-empty.png'" alt="" />
		</div>
		<u-popup :overlayOpacity="0.6" round="10" mode="center" :show="showPopup">
			<div class="popup-box">
				<div v-if="popupType === 'tip'">
					<div class="tips-title flex align-center">
						<image src="/static/icon-warning.png" class="warning-icon"></image>
						<!-- <img src="/static/icon-warning.png" class="warning-icon" alt="" /> -->
						<span>撤销提示</span>
					</div>
					<div class="tips-text">确认需要取消当前预约服务吗？</div>
					<div class="tips-bototm flex align-center justify">
						<button class="tips-cancle" @click="showPopup = false">取消</button>
						<button class="tips-confirm" @click="handleClickCancle">
							确定
						</button>
					</div>
				</div>
				<div v-if="popupType === 'service'">
					<div class="service-title">联系客服</div>
					<div class="service-phone flex align-center">
						<image src="/static/my-phone.png"></image>
						<span>{{ serviceList.phone }}</span>
					</div>
					<div class="tips-bototm flex align-center justify">
						<button class="tips-cancle" @click="showPopup = false">取消</button>
						<button class="tips-confirm" @click="handleClickPhone">确定</button>
					</div>
				</div>
			</div>
			<div></div>
		</u-popup>
		<popup-tip image="warn" ref="popuptip" title="超时撤销提示" subTitle="尊敬的用户由于服务人员即将到岗，当前不能取消订单，请谅解！祝您生活愉快!"
			confirmText="知道了">
		</popup-tip>
		<u-popup :overlayOpacity="0.6" :round="30" mode="bottom" :show="showUser" @close="showUser = false">
			<div class="user-popup">
				<div class="user-item flex align-center" v-for="(item, index) in userList" :key="index"
					@click="handleClickUserItem(item)">
					<img :src="item.avatar" class="user-avatar" alt="" />
					<div class="user-name">
						{{ userInfo.id === item.id ? "我的" : item.relativesName }}
					</div>
					<div class="user-name">
						{{ userInfo.id === item.id ? item.uphone : item.relativesPhone }}
					</div>
				</div>
			</div>
		</u-popup>
	</div>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		myOrder,
		yhMiniUser,
		orderUpdate,
		numberList,
		secondUser,
		myAvatar
	} from "@/api/my.js";
	import storage from "@/utils/storage";
	import PopupTip from "@/components/popup-tip.vue"
	import dayjs from "dayjs"
	export default {
		components: {
			CustomHeaderBar,
			PopupTip
		},
		data() {
			return {
				showUser: false,
				tabList: [{
						name: "未开始",
						type: 1,
					},
					{
						name: "已完成",
						type: 2,
					},
				],
				tabType: 1,
				popupType: "tip",
				showPopup: false,
				list: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderStatus: 1,
				},
				userList: [],
				userInfo: {},
				noData: false,
				item: {},
				serviceList: {},
			};
		},
		watch: {
			list(val) {
				if (val === this.total) {
					this.noData = true;
				}
			},
		},
		created() {
			this.userInfo = storage.getUserInfo();
			// this.getList();
			if (this.userInfo.utype == 1) {
				this.getSecondUser();
			} else {
				this.getYhMiniUser();
			}
			this.getNumberList();
		},
		computed: {
			...mapGetters(["PictureUrl", "UserInfo"]),
		},
		methods: {
			// 客服电话列表
			getNumberList() {
				numberList().then((res) => {
					if (res.data.rows.length > 0) {
						this.serviceList = res.data.rows[0];
					}
				});
			},
			handleClickPhone(item) {
				uni.makePhoneCall({
					phoneNumber: serviceList.phone,
				});
			},
			// tab切换
			handleClickTab(item) {
				this.queryParams.orderStatus = item.type;
				this.tabType = item.type;
				this.init();
			},
			// 撤销
			handleClickRevoke(item) {
				this.popupType = "tip";
				this.showPopup = true;
				this.item = item;
			},
			handleClickCancle() {
				if (new dayjs(this.item.subDateTime).unix() - new dayjs().unix() > 2 * 60 * 60) {
					orderUpdate({
						orderStatus: 2,
						orderSuccessType: 2,
						id: this.item.id,
					}).then((res) => {
						if (res.data.code === 200) {
							this.showPopup = false;
							uni.$u.toast("撤销成功");
							this.init();
						}
					});
				} else {
					this.showPopup = false;
					this.$refs.popuptip.tipshow = true
				}
			},
			// 详情
			handleClickItem(item) {
				uni.navigateTo({
					url: "/pages/my/order/detail?id=" + item.id,
				});
			},
			init() {
				this.list = []
				this.queryParams.pageNum = 1;
				this.getList();
			},
			getYhMiniUser() {
				yhMiniUser().then((res) => {
					if (res.data.code === 200) {
						res.data.rows.unshift(storage.getUserInfo());
						this.userList = res.data.rows;
						this.userList.forEach((item, index) => {
							this.getAvatar(item, index)
						})
					}
				});
			},
			getSecondUser() {
				secondUser().then((res) => {
					if (res.data.code === 200) {
						const data = res.data.data;
						data.forEach((item) => {
							item.relativesName = item.uname;
							item.relativesPhone = item.uphone;
							item.id = item.uphone;
						});
						this.userList = data;
						this.userList.forEach((item, index) => {
							this.getAvatar(item, index)
						})
					}
				});
			},
			getAvatar(item, index) {
				myAvatar({
					userId: item.relativesPhone
				}).then(res => {
					let info = {};
					if (Array.isArray(res.data.data) && res.data.data.length > 0) {
						info = res.data.data[0];
					} else {
						info = res.data.data;
					}
					item.avatar = info.fastdfsUrl
					this.$set(this.userList, index, item)
				})
			},
			getList() {
				myOrder(this.queryParams).then((res) => {
					if (this.queryParams.pageNum === 1) {
						this.list = res.data.rows;
					} else {
						this.list = this.list.concat(res.data.rows);
					}
					if (res.data.rows.length < 10) {
						this.noData = true;
					}
				});
			},
			// 家属订单
			handleClickMembers() {
				this.showUser = true;
			},
			handleClickUserItem(item) {
				this.queryParams.userId = item.id;
				this.queryParams.pageNum = 1;
				this.getList();
				this.showUser = false;
			},
		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			if (this.noData) return;
			this.queryParams.pageNum++;
			this.getList();
		},
	};
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.top-btn {
		position: absolute;
		top: 80upx;
		right: 40upx;
		color: #fff;
		font-size: 36upx;
		// #ifdef MP-WEIXIN
		top: 140upx;
		// #endif
	}

	.user-popup {
		height: 300upx;
		overflow-y: auto;
		padding: 40upx 30upx;
		box-sizing: border-box;

		.user-item {
			padding: 0 15upx;
			padding-bottom: 13upx;
			border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
			margin-bottom: 13upx;
		}

		.user-avatar {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			margin-right: 20upx;
		}

		.user-name {
			font-size: 28upx;
			color: #54b6ac;
			margin-right: 40upx;
		}

		.user-phone {
			color: rgba(0, 0, 0, 0.85);
			font-size: 28upx;
		}
	}

	.my-order {
		min-height: 100%;
		box-sizing: border-box;
		padding-top: 160upx;
		background-color: #f4f4f4;
		position: relative;
		// #ifdef MP-WEIXIN
		padding-top: 220upx;
		// #endif


		.tabs {
			background-color: #fff;
			padding: 0 30upx;

			.item {
				line-height: 80upx;
				text-align: center;
				flex: 1;
				font-size: 34upx;
				color: #666;
				border-bottom: 4upx solid transparent;

				&.active {
					color: #33ccac;
					border-color: #33ccac;
				}
			}
		}

		.list {
			box-sizing: border-box;
			padding: 0 24upx;
			padding-bottom: 40upx;

			.item {
				padding-bottom: 20upx;
				margin-top: 32upx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 30upx;

				.item-center {
					padding: 0 34upx;
				}

				.time {
					height: 98upx;
					padding: 0 30upx;
					border-bottom: 1upx solid rgba(0, 0, 0, 0.06);
					margin-bottom: 25upx;
				}

				.avatar {
					width: 42upx;
					height: 42upx;
					border-radius: 50%;
					margin-right: 10upx;
				}

				.info {
					flex: 1;
					width: 0;
				}

				.name,
				.experience,
				.address {
					font-size: 28upx;
					color: rgba(0, 0, 0, 0.65);
				}

				.experience {
					margin-left: 30upx;
				}

				.address {
					margin-top: 20upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.more-icon {
					width: 40upx;
					height: 40upx;
					align-self: center;
					margin-left: 30upx;
				}

				.list-btn {
					display: inline-block;
					width: 166upx;
					line-height: 68upx;
					padding: 0;
					border-radius: 10upx;
					border: 1upx solid #33ccac;
					color: #33ccac;
					font-size: 28upx;
					background-color: #fff;
				}

				.list-bottom {
					text-align: right;
					padding-right: 35upx;
					margin-top: 18upx;

					img {
						width: 80upx;
						height: 80upx;
						margin-right: 15upx;
					}
				}
			}
		}

		.list-empty {
			margin-top: 320upx;
			color: #868686;
			font-size: 30upx;
			text-align: center;

			img {
				width: 312upx;
				margin: 0 auto;
			}
		}

		.popup-box {
			width: 416upx;
			padding: 0 40upx;
			padding-top: 65upx;
			padding-bottom: 50upx;
			box-sizing: border-box;
		}

		.tips-title {
			justify-content: center;

			span {
				font-size: 34upx;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 20upx;
			}

			.warning-icon {
				width: 52upx;
				height: 52upx;
			}
		}

		.tips-text {
			font-size: 26upx;
			color: #666;
			margin-top: 55upx;
		}

		.tips-bototm {
			margin-top: 60upx;

			.tips-cancle,
			.tips-confirm {
				flex: 1;
				height: 60upx;
				font-size: 26upx;
			}

			.tips-cancle {
				background-color: #ebedf0;
				color: #bfbebe;
			}

			.tips-confirm {
				background-color: #61d7ca;
				color: #fff;
				margin-left: 16upx;
			}
		}

		.service {
			position: fixed;
			right: 0;
			top: 410upx;

			img {
				width: 185upx;
			}
		}

		.service-title {
			font-size: 34upx;
			color: rgba(0, 0, 0, 0.8);
			text-align: center;
		}

		.service-phone {
			margin-top: 50upx;

			image {
				width: 58upx;
				height: 58upx;
				margin-right: 10upx;
			}

			span {
				color: #0fce8b;
				font-size: 38upx;
			}
		}
	}
</style>
